<style scoped>
    .wraper {
        padding: 0 20px 60px 20px;
    }

    .search-form {
        overflow: hidden;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }


    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }




    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }


    /* 表格样式 start*/

    .pro-card {
        margin-bottom: 10px;
    }

    .pro-card-head {
        background-color: #e6e7eb;
        line-height: 38px;
        border: 1px solid #ddd;
    }

    .pro-card-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding-left: 20px;
    }

    .pro-card-headr {
        padding-right: 10px;
        text-align: right;
    }

    .pro-card-content {
        clear: both;
    }

    .pro-paramname {
        text-align: center;
        background-color: #e6e7eb;
        font-size: 14px;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .pro-paramvalue {
        padding-left: 10px;
        border-right: 1px solid #ddd;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pro-card-contentrow {
        line-height: 40px;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }






    /* 表格样式  end */

    /* 分页 start */

    .page {
        margin: 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }







    /* 分页 end */

    .receiptbox {
        padding: 10px;
        background-color: #edf2f6;
    }

    .receiptbox .ivu-input-group-append button {
        background-color: #19be6b;
        color: #fff;
    }

    .receiptbox .ivu-input-group {
        top: 0;
    }

    .receiptbox-upload {
        position: relative;
    }

    .receiptbox-upload-input {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    .receiptbox .ivu-tag {
        vertical-align: middle;
    }

    .renewal-box {
        margin-left: -16px;
        margin-right: -16px;
        padding: 16px;
        padding-bottom: 0;
        background-color: #cfebf9;
        overflow: hidden;
    }

    .renewal-pro {
        margin-left: -16px;
        margin-right: -16px;
        padding: 12px;
        height: 395px;
        overflow-y: auto;
    }

    .renewal-pro-title {
        padding-left: 15px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        background-color: #edf2f6;
        margin-bottom: 10px;
    }

    .renewal-pro-title b {
        display: inline-block;
        margin-left: 20px;
    }

    .renewal-pro-checkbox {
        font-size: 14px;
        padding-left: 15px;
        border: 1px solid #edf2f6;
        height: 50px;
        line-height: 50px;
        margin-bottom: 10px;
    }

    .renewal-pro-price {
        color: #ff4848;
        font-size: 16px;
        padding-right: 15px;
    }

    .renewal-footer {
        margin: -12px -18px;
        padding: 12px 18px;
        background-color: #f2f2f2;
        overflow: hidden;
    }

    .renewal-footer-l {
        float: left;
    }

    .renewal-footer-r {
        float: right;
    }

    .renewal-total {
        padding-left: 15px;
        color: #ff3d3d;
        font-size: 25px;
    }

    .mod_table {
        margin-right: 22px;
        margin-top: 20px;
        height: 50px;
    }
</style>
<style>
    .a-link {
        color: #4074e1;
        text-decoration: underline;
        cursor: pointer;
    }

    .ivu-table-row-highlight .a-link {
        color: #fff;
    }

    .receiptbox .ivu-tag span.ivu-tag-text {
        max-width: 260px;
        overflow: hidden !important;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .receiptbox .ivu-tag span.ivu-tag-dot-inner,
    .receiptbox .ivu-tag i {
        vertical-align: middle;
    }
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                    <Form :model="searchForm" class="search-form">
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <FormItem label="选择公司">
                            <Select v-model="searchForm.policy_cid" multiple filterable placeholder="选择保险公司" :transfer=true>
                                <Option v-for="(option, index) in comoptions" :value="option.cid" :key="index">{{option.name}}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <FormItem label="机构名称">
                            <Select multiple   filterable  placeholder="请输入分支机构" v-model="searchForm.yun_org_mid" :transfer=true>
                                <Option v-for="item in orglist" :value="item.id" :key="item.id">{{item.shortn}}</Option>                                                                                                                                       
                            </Select>
                        </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <Form-item label="姓名">
                            <Input size="large" type="text" v-model="searchForm.agent_name" placeholder="请输入姓名" />
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <Form-item label="保单状态">
                            <Select v-model="searchForm.status" multiple transfer placeholder="请选择">
                                <Option value="1">预收件</Option>
                                <Option value="2">承保件</Option>
                                <Option value="3">契撤件</Option>
                                <Option value="4">停效件</Option>
                                <Option value="5">失效件</Option>
                                <Option value="6">解约件</Option>
                                <Option value="7">终止件</Option>
                            </Select>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <Form-item label="投保时间">
                            
                            <DatePicker  @on-change="datachange($event,searchForm,'insure_date')" v-model="searchForm.insure_datetime"
                                type="daterange" transfer placeholder="请选择"></DatePicker>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <Form-item label="承保时间">
                            <DatePicker  @on-change="datachange($event,searchForm,'underwrite_date')" v-model="searchForm.underwrite_datetime"
                                type="daterange" transfer placeholder="请选择"></DatePicker>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">            
                        <Form-item label="保费类型">
                            <Select v-model="searchForm.policy_type" transfer placeholder="请选择">
                                <Option value="1" >原保费</Option>
                                <Option value="2">标准保费</Option>
                            </Select>
                        </Form-item>
                        </Col>
                         <Col :xs="24" :sm="12" :md="12" :lg="7">
                        <Form-item label=""> 
                            <Select  filterable  placeholder="请输入险种" v-model="searchForm.insurance_mid" :transfer=true>
                                <Option value="">全部</Option>
                                <Option v-for="item in prolist" :value="item.id" :key="item.id">{{item.name}}</Option>                                                                                                                                       
                            </Select>
                        </Form-item>
                        </Col>         
                        <Col :xs="24" :sm="12" :md="12" :lg="7">            
                        <Form-item label="职级">
                            <Select v-model="searchForm.rank_id" multiple transfer placeholder="请选择">
                                <Option value="1">主任</Option>
                                <Option value="2">营销员</Option>
                                <Option value="2">总监</Option>
                            </Select>
                        </Form-item>
                        </Col>
                    </Form>
                    <Col span="24" class="table-action">
                        <Col span="12" style="height:36px;line-height:36px;">
                            保单总件数：{{count}}件&emsp;&emsp;&emsp;保费总数：{{sum}}元
                        </Col>
                        <Col span="12">
                            <Button type="primary" size="large" class="fr"  @click="search">搜索</Button>
                        </Col>
                    </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme">
                        <Table :loading="tableloading"  @on-current-change="tableCurrentChange($event)" 
                            stripe highlight-row border :columns="columns1" :data="policylist" class=""></Table>
                    </div>
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :sm="24" :md="12" :lg="8">
                    <Button type="primary" :disabled="tableaction" @click="see" size="large" class="fl mr10 ">查看</Button>
                </Col>
                <Col :sm="24" :md="12" :lg="16" class="tRight">
                <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange"
                    @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import { productGetAll } from '../../api/product'
    import {
        parteGetByName
    } from '../../api/parter'
    import {
        list
    } from '../../api/policy'
    import {
        formatTime
    } from '../../libs/time'
    import debounce from 'lodash.debounce'
    export default {
        data() {
            return {
                prolist:[],
                count:0,
                sum:0,
                demo: 0,
                status: 'active',
                cumputeStatus: 'active',
                loading: true,
                page: 1,
                pagesize: 10,
                listTotal: 0,
                searchForm: {
                    insurance_mid:'',
                   p:1,
                   pagesize:10,
                   insure_date:[],
                   underwrite_date:[],
                   policy_cid:[],
                   yun_org_mid:[],
                   status:[],
                   is_main:'',
                   agent_name:'',
                   rank_id:'',
                   policy_type:'1'
                },
                orglist: [],
                comoptions: [],
                tableloading: true,
                tableaction: true,
                current: 0,
                currentpage: 1,
                currentRow: {},
                columns1: [
                    // {
                    //     title: '公司名称',
                    //     key: 'company',
                    //     align: 'center',
                    // },
                    {
                        title: '工号',
                        key: 'job_code',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {

                            }, params.row.job_code)
                        },
                    },
                    {
                        title: '营销员',
                        key: 'name',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {
                                attrs: {
                                    class: "a-link"
                                },
                            }, params.row.name)
                        },
                    },
                    {
                        title: '职级',
                        key: 'rank_name',
                        align: 'center',
                    },
                    {
                        title: '保费',
                        key: 'premium',
                        align: 'center',
                    },
                    {
                        title: '保单件数',
                        key: 'count',
                        align: 'center',
                    },
                    {
                        title: '人数',
                        key: 'count',
                        align: 'center',
                    },
                ],
                policylist: [

                ],
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },
            // get_yun_id() {
            //     return this.$store.state.user.id
            // },
            // get_pre() {
            //     return (this.policy_count > 0 ? parseInt((this.uplodeTag / this.policy_count) * 100) : 0)
            // },
            // cumpute_get_pre() {
            //     return (this.computed_count > 0 ? parseInt((this.computed_tag / this.computed_count) * 100) : 0)
            // },
            // daterange() {
            //     return this.exportForm.daterange
            // },
            // percent() {
            //     return this.$store.state.socket.compute_premium
            // }
        },
        watch: {
            // daterange(newValue, oldValue) {　　　　
            //     if (newValue.length > 0) {
            //         this.exportForm.start_date = newValue[0]
            //         this.exportForm.end_date = newValue[1]
            //     } else {
            //         this.exportForm.start_date = ''
            //         this.exportForm.end_date = ''
            //     }　　
            // },
            // percent(newValue){
            //     console.log(newValue,'....')
            //     //this.demo = newValue
            // }
        },
        channel: 'progress.' + sessionStorage.getItem('id'),
        mounted() {
            this.getList();
            this.cominit();
            this.getProList();
        },
        methods:{
            getList(){
                this.tableloading = true
                this.tableaction = true
                new Promise((resolve, reject) => {
                    list(this.searchForm).then(response => {
                        if (response.data.err == 0) {
                            this.policylist = response.data.data.source_data;
                            this.listTotal = response.data.data.total;
                            this.sum = response.data.data.sum;
                            this.count = response.data.data.count;
                            this.tableloading = false
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            cominit() {
                new Promise((resolve, reject) => {
                    let _params = {
                        name: ''
                    }
                    parteGetByName(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.comoptions = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            orglistinit() {
                new Promise((resolve, reject) => {
                    let _params = {
                        name: ''
                    }
                    getListByName(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.orglist = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            search(){
                this.searchForm.p = 1;
                this.$refs.pages['current'] = 1;
                this.getList();
            },
            pageChange(val){
                this.searchForm.p=val;
                this.getList();
            },
            pageSizeChange(val){
                this.searchForm.p=1;
                this.searchForm.pagesize=val;
                this.getList();
            },
            tableCurrentChange(current,oldcurrent){
                this.currentRow = current;
                this.tableaction = false;
            },
            see(){
                this.$router.push({name:'prolicydtl',params:{eid:this.currentRow.eid,type:this.searchForm.policy_type}})
            },
            getProList(){           
            new Promise((resolve,reject)=>{
                productGetAll().then(response=>{
                    if(response.data.err == 0){
                        this.prolist = response.data.data
                    }
                    resolve()
                }).catch(error => {
                    reject(error);
                });
            });
        },
        }
    }
</script>